<template>
	<view class="userinfor-page">
		<view class="header">
			<view class="userInfor">
				<image
					:src="userInfor.avatarUrl"
					@click="getuserinfo() "
				/>
				<view class="user-basic">
					<text class="username">{{userInfor.appNickName}}</text>
					<view class="user-school">
						<text>{{userInfor.school||"院校"}}</text>
						<text class="profession">{{userInfor.major}}</text>
					</view>
					<view class="user-credit">
						<text>信用等级:{{userInfor.credit}}</text>
					</view>
				</view>
			</view>
			<view class="leftInfor">
				<view
					class="user-focus"
					@click="linkTo('/packages/MyWorld/MyInforFouce/index',{id:userInfor.id})"
				>
					<view class="number">{{userInfor.follow}}</view>
					<view class="label">关注</view>
				</view>
				<view
					class="user-fans"
					@click="linkTo('/packages/MyWorld/MyInforfans/index')"
				>
					<view class="number">{{userInfor.fans}}</view>
					<view class="label">粉丝</view>
				</view>
			</view>
		</view>
		<view class="button">
			<text />
		</view>
	</view>
</template>

<script>
import { baseUrls } from '@/assets/js/school.js'
import { userinfo } from '@/api/api_userInfo.js'
import { getToken, setUserInfo } from '@/store/user.js'
export default {
  props: {
    userInfor: { type: Object },
    baseUrl: baseUrls.avater
  },
  data() {
    return {
      // linkTo('/packages/MyWorld/personPage/index')
    }
  },
  methods: {
    async getuserinfo() {
      const res = await userinfo(getToken())

    	this.userInfor = { ...{
        credit: '良好', // 信用等级
        fans: 0, // 粉丝
        FocusOn: 0 // 关注
      }, ...res.data }
      setUserInfo(this.userInfor)
    }
  }
}
</script>

<style lang="scss">
.userinfor-page{
	.leftInfor{
		display: flex;
		flex-direction: row;
		justify-items: center;
		justify-content: space-between;
		align-items: center;
		margin-right: 10rpx;
		padding-top: 20rpx;
		.user-focus{
			margin-right: 30rpx;
			text-align: center;
			color: #fff;
			cursor: pointer;
			.number{
				font-size: 35rpx;
			}
			.label{
				font-size: 25rpx;
				margin-top:20rpx;
			}
		}
		.user-fans{
			margin-right: 30rpx;
			text-align: center;
			color: #fff;
			.number{
				font-size: 35rpx;
			}
			.label{
				font-size: 25rpx;
				margin-top:20rpx;
			}
		}
	}
	.header{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		justify-items: center;
		background-image: url(https://skillgo.cn/image/charge/myinfor/dVRD8E3XUGs.png);
		padding-top: 40rpx;
		width: 100vw;
		height: 450rpx;
		.userInfor{
			display: flex;
			flex-direction: row;
			justify-items: center;
			margin-left: 40rpx;
			.user-basic{
				margin-left:20rpx ;
				.username{
					color: #fff;
					font-weight: 700;
					font-size: 40rpx;
				}
				.user-school{
					display: flex;
					color: #fff;

					.profession{
						margin-left:20rpx ;
					}
				}
				.user-credit{
					text-align: center;
					background-color: rgba(31, 219, 0, 1);
					border-radius: 30rpx;
					color: #fff;
					width: 220rpx;
				}
			}

			image{
				box-shadow:1px 1px 10px rgba(239, 235, 233, 0.6) ;
				width: 120rpx;
				height: 120rpx;
				border-radius: 100%;
				border: 7rpx solid #fff;
				object-fit:contain;
  			flex: 1;
			}
		}

	}
	.button{
		height: 190rpx;
		width: 90%;
		background-color: #fff;
		margin-top: -100rpx;
		margin-left: 50%;
		transform: translate(-50%);
		border-radius: 15rpx ;
		text-align: center;
		justify-content: center;
		align-items: center;
		background-image: url(https://skillgo.cn/image/welcome.jpg);
		background-position: center;
		background-size: contain;
		box-shadow:1px 1px 5px rgba(255, 251, 249) ;
		text{
			font-size:45rpx;
			font-family: '微软雅黑';
			color: rgb(0, 0, 0);
		}
	}
}

</style>
